import headImg from "./static/head.png";
import centerImg from "./static/center.png";
import "./Page.scss";
import React, {useState} from "react";

const buttons: any = [
  {label: "一年级", value: "1"},
  {label: "二年级", value: "2"},
  {label: "三年级", value: "3"},
  {label: "四年级", value: "4"},
  {label: "五年级", value: "5"},
  {label: "六年级", value: "6"}
];

export default function LandingPage() {
  const [modal, setModal] = useState<{open: boolean; img: string}>({open: false, img: ""});
  const handleOpenModal = (open: boolean, classValue: string) => {
    const img = `https://wayuchat.top/resource/shuqiao/class${classValue}-1.png`;
    setModal({open, img});
  };
  return (
    <div className={"LandingPage"}>
      <div className="LandingPage-content headImg">
        <img src={headImg} alt="" />
      </div>
      <div className="LandingPage-content centerImg">
        <img src={centerImg} alt="" />
      </div>

      <div className="LandingPage-buttons">
        {buttons.map((item: any) => (
          <button key={item.label} className="LandingPage-btn" onClick={() => handleOpenModal(true, item.value)}>
            {item.label}
          </button>
        ))}
      </div>
      {/* 弹窗 */}
      {modal.open && (
        <div className="LandingPage-modal-mask" onClick={() => handleOpenModal(false, "")}>
          <div className="LandingPage-modal" onClick={e => e.stopPropagation()}>
            <div className={"title"}>长按扫码添加老师</div>
            <div className={"qrcode"}>
              <img src={modal.img} alt="head" className="LandingPage-headImg" />
            </div>

            {/*<button onClick={() => setModal({open: false, label: ""})} style={{marginTop: 8}}>*/}
            {/*  关闭*/}
            {/*</button>*/}
          </div>
        </div>
      )}
    </div>
  );
}
